<template>
  <div class="personal-data">
    <mt-header title="个人资料" fixed>
      <router-link to slot="left">
        <mt-button icon="back" @click="$router.go(-1)"></mt-button>
      </router-link>
      <!-- <mt-button icon="more" slot="right"></mt-button> -->
    </mt-header>
    <!-- <div class="progress">
      <mt-progress :value="50" :bar-height="20"></mt-progress>
      <div class="progress-text">完善度：50%</div>
    </div>-->
    <div class="base-info">
      <Form ref="formDataView" :model="formData">
        <!-- <mt-cell class="cell" title="更换头像" to="#" is-link>
          <img slot="icon" src="static/img/server/usericon.png" width="24" height="24" />
        </mt-cell>
        <mt-cell class="cell" title="更换封面图片" to="#" is-link>
          <img slot="icon" src="static/img/server/userbanner.jpg" width="24" height="24" />
        </mt-cell>-->
        <mt-field label="昵称" placeholder="请输入" v-model="formData.nickName"></mt-field>
        <mt-field label="真实姓名" placeholder="请输入" v-model="formData.realName"></mt-field>
        <mt-field label="身份证号" placeholder="请输入" v-model="formData.idNum"></mt-field>
        <mt-field label="出生日期" placeholder="请输入" v-model="formData.birth"></mt-field>
        <mt-field label="性别" placeholder="请输入" v-model="formData.gender"></mt-field>
        <mt-field label="手机号" placeholder="请输入" v-model="formData.phone"></mt-field>
        <mt-field label="邮箱" placeholder="请输入" v-model="formData.mail"></mt-field>
        <mt-field label="所在城市" placeholder="请输入" v-model="formData.cityName"></mt-field>
        <mt-field label="职业" placeholder="请输入" v-model="formData.job"></mt-field>
        <mt-field label="爱好" placeholder="请输入" v-model="formData.hobby"></mt-field>
        <mt-field label="服务项目" placeholder="请输入" v-model="formData.server"></mt-field>
        <mt-field label="个人标签" placeholder="标签之间请使用英文逗号隔开" v-model="formData.label" title="hahah"></mt-field>
      </Form>
    </div>

    <div class="confirm-release">
      <div class="cancel" @click="$router.go(-1)">取消</div>
      <div class="release" @click="handleSave('formDataView')">确认</div>
    </div>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
import { fetchGetData, fetchPostData } from "@/api/fetch.js";
import { formatDate } from "@/libs/util.js";
export default {
  name: "personalData",
  data() {
    return {
      formData: {
        id: this.$route.params.id,
        nickName: "",
        iconUrl: "",
        imgUrl: "",
        phone: "",
        mail: "",
        openId: "",
        gender: "",
        birth: "",
        city: "",
        addr: "",
        job: "",
        hobby: "",
        realName: "",
        idNum: "",
        server: ""
      }
    };
  },
  props: [],
  methods: {
    handleSave(name) {
      fetchPostData("/api/user/edit", this.formData).then(data => {
        if (data.status == 1) {
          this.$router.go(-1);
          Toast({
            message: "操作成功"
            // iconClass: "icon iconxingxing"
          });
        } else {
          Toast({
            message: "操作失败，请重试"
            // iconClass: "icon iconxingxing"
          });
          console.log("fail");
        }
      });
    }
  },
  mounted() {
    fetchGetData("/api/user/detail", { id: this.formData.id }).then(data => {
      if (data.status == 1) {
        this.formData = data.data;
        console.log(this.formData);
      } else {
        console.log("fail");
      }
    });
  },
  filters: {}
};
</script>

<style lang="stylus" scoped>
@import '~@/assets/style/variable.styl';

.personal-data {
  padding-top 40px;
  padding-bottom: 55px;
  height: 100%;
  background-color #efefef;
  box-sizing: border-box;

  .progress {
    position: relative;
    // background-color: pink;
    height: 1rem;
    padding: 0 0.3rem;
    border-bottom: 1px solid #eee;

    .progress-text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }

  .base-info {
    .cell {
    }
  }

  .confirm-release {
    height: 55px;
    z-index: 999;
    display: flex;
    line-height: 55px;
    text-align: center;
    position: fixed;
    width: 100%;
    bottom: 0;

    .cancel {
      flex: 1;
      background-color: #efefef;
    }

    .release {
      flex: 1;
      background-color: $themeColor;
      color: #fff;
    }
  }
}

.progress>>>.mt-progress {
  top: 50%;
  transform: translateY(-50%);

  .mt-progress-runway {
    border-radius: 10px;
  }

  .mt-progress-progress {
    border-radius: 10px 0 0 10px;
  }
}
</style>